<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
</head>
<body>


<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!-- 柱状图bar -->
<div id="echarts_bar" style="width: 600px;height:400px;"></div>
<!-- 柱状图line -->
<div id="echarts_line" style="width: 600px;height:400px;"></div>
<!-- 饼状图pie-->
<div id="echarts_pie" style="width: 600px;height:400px;"></div>
<!-- 地图map-->
<div id="echarts_map" style="width: 600px;height:400px;"></div>
</body>

<script type="text/javascript">

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echarts_bar'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '阶梯瀑布图',
                        subtext: 'From ExcelHome',
                        sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var tar;
                            if (params[1].value !== '-') {
                                tar = params[1];
                            }
                            else {
                                tar = params[0];
                            }
                            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                        }
                    },
                    legend: {
                        data:['支出','收入']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type : 'category',
                        splitLine: {show:false},
                        data :  function (){
                            var list = [];
                            for (var i = 1; i <= 11; i++) {
                                list.push('11月' + i + '日');
                            }
                            return list;
                        }()
                    },
                    yAxis: {
                        type : 'value'
                    },
                    series: [
                        {
                            name: '辅助',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                },
                                emphasis: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                }
                            },
                            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
                        },
                        {
                            name: '收入',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                        },
                        {
                            name: '支出',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'bottom'
                                }
                            },
                            data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

</script>
</body>

</html>